import JSZip from "jszip";

async function downloadImagesAsZip(imagesWithText) {
  // 创建一个空的JSZip实例
  const zip = new JSZip();

  // 创建一个Promise数组，每个Promise处理一张图片
  const imagePromises = imagesWithText.map(async (item, index) => {
    const img = new Image();
    img.crossOrigin = "Anonymous";

    return new Promise((resolve, reject) => {
      img.onload = () => {
        const canvas = document.createElement("canvas");
        const ctx = canvas.getContext("2d");

        canvas.width = img.width;  
        canvas.height = img.height + 30; // 如果想要在底部添加额外的白色空间，可以增加高度  
        
        // 绘制图片（注意：如果Canvas高度增加了，图片可能需要调整位置）  
        ctx.drawImage(img, 0, 0, img.width, img.height); // 这里不改变图片大小，只是按原尺寸绘制  
        
        // 在Canvas底部绘制白色背景  
        // 由于我们增加了Canvas的高度，所以白色矩形从底部开始向上绘制30像素  
        ctx.fillStyle = 'white';  
        ctx.fillRect(0, canvas.height - 30, canvas.width, 30);  
        
        // ...（接下来的代码，比如绘制文本或其他图形，可以继续在这里添加）  
        // 注意：如果你想要在白色背景上绘制文本，你应该在fillRect之后进行  
        
        // 例如，在白色背景上绘制文本  
        // const text = "这里是文本";  
        ctx.fillStyle = 'black'; // 文本颜色  
        ctx.font = '35px Arial'; // 文本字体和大小  
        // 测量文本宽度（可选，但有助于确定文本位置）  
        const textWidth = ctx.measureText(item.text).width;  
        // 文本位置（这里是从白色背景的顶部开始，但你可以根据需要调整）  
        const textX = (canvas.width - textWidth) / 2; // 居中显示  
        const textY = canvas.height - 20; // 假设距离白色背景底部有10px的间距  
        ctx.fillText(item.text, textX, textY);  


        // 将Canvas转换为Blob
        canvas.toBlob(
          (blob) => {
            if (blob) {
              resolve({ name: `image_${index + 1}.jpg`, blob });
            } else {
              reject(new Error("Failed to create blob from canvas"));
            }
          },
          "image/jpeg",
          0.8
        ); // 指定JPEG格式和质量
      };

      img.onerror = (error) => {
        reject(error);
      };

      img.src = item.url;
    });
  });

  try {
    // 等待所有图片处理完成
    const files = await Promise.all(imagePromises);

    // 将处理后的文件添加到ZIP中
    files.forEach(({ name, blob }) => {
      zip.file(name, blob, { binary: true });
    });

    // 生成ZIP文件并触发下载
    const content = await zip.generateAsync({ type: "blob" });
    const url = URL.createObjectURL(content);

    const a = document.createElement("a");
    a.href = url;
    a.download = "images.zip";
    document.body.appendChild(a);
    a.click();

    // 清理
    document.body.removeChild(a);
    URL.revokeObjectURL(url);
  } catch (error) {
    console.error("Error processing images:", error);
  }
}

export default downloadImagesAsZip;
